<template>
  <div class="relative animate-from-right">              
    <div>
      <h2 class="text-[30px] font-bold">欢迎回来 📲 </h2>
      <p class="text-[14px]  --el-text-color-primary mt-[10px] mb-[30px]">请扫描二维码以开始管理您的项目</p>
    </div>
        <div>
          <img src="@/assets/images/chat.png" alt="" class="w-[80%] m-auto">
          <p class="w-full text-center text-[13px] pt-3">扫码后点击 '确认'，即可完成登录</p>
        </div>
       
   
           
            <el-button type="default" class="w-full mt-[15px] !ml-[0]" @click="router.go(-1)">返回</el-button>
     
  </div>
</template>

<script setup lang='ts'>




let email=ref('')
/**路由跳转**/
const router =useRouter()
const goPage=(path:any)=>{
  router.push(path)
}


import type {FormRules} from 'element-plus'
/**获取form**/
const ruleFormRef = ref()


/**提交数据**/
const ruleForm = reactive({
 phone: '',
 code:[]
})
 const code = ref(Array(6).fill(''))
const activeIndex = ref(0)
const inputRefs = ref<any>([])
const captchaImage = ref('')
const countdown = ref(0)

// 处理键盘事件
const handleKeyDown = (e:any, index:any) => {
  console.log(e.key)
   //code.value[index]=''
   if(e.key === 'Backspace'&&!code.value[index]&& index > 0){
    activeIndex.value=index-1
      inputRefs.value[activeIndex.value].focus()
   }


}

// 处理输入
const handleInput = (e:any, index:any) => {
  //console.log(e,inputRefs,index)
  //e表示输入了什么值 index当前input的索引
  code.value[index]=e
  if (e && index < 5) {
    activeIndex.value = index + 1
    inputRefs.value[activeIndex.value].focus()
  }
 //console.log(code.value)
}

 
 
 
 

const emailValidator= (rule: any, value: any, callback: any)=>{    
  const re = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  if (!re.test(value)) {
    //表单底部显示的错误信息
    callback(new Error('请输入正确的手机号'));
  }else{
    callback()
  }
}


/**邮箱验证**/
const rules = reactive<FormRules<typeof ruleForm>>({
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    //{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
    { validator:emailValidator, trigger: ['blur','change'] }
  ],
})
const submit = () => {
  ruleFormRef.value.validate((valid:any) => {
    if (valid) {
      ElMessage.success('手机号格式正确');
      // 这里可以调用API发送验证邮件
    } else {
      ElMessage.error('请填写正确的手机号');
      return false;
    }
  });
};


</script>

<style scoped lang="scss">
 
  
//鼠标悬浮的样式
  .el-input__wrapper:hover {
    border: 1px solid var( --focus-border-color)!important;
    box-shadow: none !important;
  }
//鼠标点击的样式
  .el-input__wrapper.is-focus{
    border: 1px solid var( --focus-border-color)!important;
    box-shadow: none !important;
  }
//原封不动想要修改的样式
  :deep(.code .el-input__wrapper) {
  @apply 
   border-slate-200
  border-[var(--el-border-color)] 
  border-solid 
  rounded-none 
  shadow-none 
  border 

  border-l-0
  overflow-hidden
  p-0
  block;
  
    
  }


  :deep(.code  .el-input:nth-of-type(1) .el-input__wrapper) {
    @apply border-l rounded-l-[5px];
     
  }
   :deep(.code .el-input:nth-last-of-type(1) .el-input__wrapper) {
    @apply rounded-r-[5px]
  }

  :deep(.code .el-input__inner){
    @apply w-[100%] block text-center text-[14px]

  }
  
  
 

</style>